/**
 * @author: jever
 * @date: 2019/3/11
 * @description:  navlink.js
 */

import React from 'react';
import PropTypes from 'prop-types'
import {TabBar} from "antd-mobile";
import {withRouter} from "react-router-dom";
import {connect} from 'react-redux'

@withRouter
@connect(
    state=>state.chat
)

class NavLinkBar extends React.Component{
    static propTypes = {
        data:  PropTypes.array.isRequired
    }
    render() {
        const navList = this.props.data.filter(v => !v.hide)
        const {pathname} = this.props.location
        return (
            <TabBar style={{ position: 'fixed', height: '100%', width: '100%', bottom: 0 } }>
                {navList.map(v =>(
                    <TabBar.Item
                        key={v.path}
                        badge={v.path==='/msg'?this.props.unread:0}
                        title={v.text}
                        icon={{uri: require(`./image/${v.icon}.png`)}}
                        selectedIcon={{uri: require(`./image/${v.icon}-active.png`)}}
                        selected={pathname === v.path}
                        onPress={() => {
                            this.props.history.push(v.path)
                        }}
                    >

                    </TabBar.Item>
                ))}
            </TabBar>
        )
    }
}

export default NavLinkBar